import vue from "@vitejs/plugin-vue";
import vueJsxPlugin from "@vitejs/plugin-vue-jsx";
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "node:path";
// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const isDev = mode === "development";
  return {
    plugins: [
      vue(),
      vueJsxPlugin(),
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
        include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/],
      }),
    ],
    resolve: {
      extensions: [".js", ".jsx", ".vue"],
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // additionalData: `@use "@/css/element.scss" as *;`, // 引入全局变量
        },
      },
    },
    esbuild: {
      drop: isDev ? [] : ["console", "debugger"],
    },
    build: {
      minify: true,
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            const fileName = assetInfo.names[0];
            const ext = fileName.substring(fileName.lastIndexOf("."));
            if (ext === ".css") {
              return "style/[name].[hash].[ext]";
            } else if (ext === ".js") {
              return "js/[name].[hash].[ext]";
            } else {
              return "assets/[name].[hash].[ext]";
            }
          },
          // 手动分包 TODO: 打包后存在问题
          // manualChunks: (id) => {
          //   // 处理 node_modules
          //   if (id.includes("node_modules")) {
          //     const pathParts = id.split("node_modules/")[1].split("/");
          //     const packageName =
          //       pathParts[0] === "@"
          //         ? `${pathParts[0]}/${pathParts[1]}`
          //         : pathParts[0];

          //     // 按重要性和使用场景分组
          //     const chunkGroups = {
          //       core: ["vue", "vue-router"],
          //       corePlugins: ["pinia", "vue-i18n"],
          //       elementPlus: ["element-plus", "@element-plus"],
          //       charts: ["echarts"],
          //       utils: ["axios"],
          //     };

          //     // 查找匹配的组
          //     for (const [group, packages] of Object.entries(chunkGroups)) {
          //       if (packages.includes(packageName)) {
          //         return group;
          //       }
          //     }

          //     // 默认第三方库
          //     return "vendor";
          //   }

          //   // 处理应用代码
          //   // if (id.includes("/src/")) {
          //   //   if (id.includes("/components/")) {
          //   //     return "components";
          //   //   }
          //   //   if (id.includes("/views/")) {
          //   //     return "views";
          //   //   }
          //   //   if (id.includes("/store/")) {
          //   //     return "store";
          //   //   }
          //   //   if (id.includes("/utils/")) {
          //   //     return "app-utils";
          //   //   }
          //   // }
          // },
          entryFileNames: "js/[name].[hash].js",
          chunkFileNames: "js/[name].[hash].js",
        },
      },
    },

    server: {
      port: 9528,
      proxy: {
        "/api": {
          target: "http://localhost:3000", // 代理目标地址
          changeOrigin: true, // 是否改变源
        },
      },
    },
  };
});
